<template>
  <div class="cust-container">
    <RouterView #default="{ Component }">
      <Transition appear mode="out-in" :css="false" @enter="onEnter" @leave="onLeave">
        <component :is="Component" />
      </Transition>

    </RouterView>
  </div>
</template>

<script setup>
import gsap from 'gsap';

const onEnter = (el, done) => {
  gsap.fromTo(el, {
    opacity: 0,
    xPercent: 100
  }, {
    opacity: 1,
    xPercent: 0,
    duration: 1,
    onComplete: done
  });
};
const onLeave = (el, done) => {
  gsap.to(el, {
    opacity: 0,
    xPercent: -100,
    duration: 1,
    onComplete: done
  });
}


</script>

<style lang="scss" scoped>
.cust-container {
  overflow: hidden;
}

.v {
  &-enter-from {
    opacity: 0;
    transform: translateX(50%);
    /* transform: rotate(360deg) scale(0);     */

  }

  &-enter-active,
  &-leave-active {
    transition: all 0.8s ease-in-out;
  }

  &-leave-to {
    opacity: 0;
    transform: translateX(-100%);
  }
}
</style>